<template>
	<view class="container">
		<view v-if="showStatus">
			<uni-list>
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'shop-filled'}" title="饲料类型" :rightText="type" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'location-filled'}" title="存储地点"
					:rightText="position" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'settings-filled'}" title="数量"
					:rightText="store.materiaFeedStoreNum+' KG'" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="进仓时间"
					:rightText="store.materiaFeedStoreTime" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'chat-filled'}" title="备注">
					<template v-slot:footer>
						<input type="textarea" v-model="store.remark"
							style="font-size: 12px;color: #999999;text-align: right;" />
					</template>
				</uni-list-item>
			</uni-list>
			<view class="button-group">
				<button type="warn" plain="true" @click="storeDelete" style="width: 45%;border: #E53F32 solid 1px;">删 除</button>
				<button type="primary" plain="true" @click="storeEdit" style="width: 45%;">修 改</button>
			</view>
		</view>
		
		
		<!-- 修改 -->
		<view class="example" v-if="!showStatus">
		  <uni-forms ref="form" :model="storeForm" :rules="rules" labelWidth="80px">
		    <uni-forms-item label="饲料类型" name="materiaFeedType" required>
		      <uni-data-select v-model="storeForm.materiaFeedType" :placeholder="type"
		      	:localdata="material_type"
		        ></uni-data-select>
		    </uni-forms-item>
			<uni-forms-item label="存储地点" name="materiaFeedStorePosition" required>
			  <uni-data-select v-model="storeForm.materiaFeedStorePosition" :placeholder="position"
			  	:localdata="store_position"
			    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="数量" name="materiaFeedStoreNum" required>
			  <uni-easyinput type="number" v-model="storeForm.materiaFeedStoreNum" placeholder="请输入数量(KG)" />
			</uni-forms-item>
			<uni-forms-item label="进仓时间" name="materiaFeedStoreTime" required>
			  <uni-datetime-picker type="datetime" v-model="storeForm.materiaFeedStoreTime"/>
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput type="textarea" v-model="storeForm.remark" placeholder="请输入备注" />
			</uni-forms-item>
		  </uni-forms>
		  <view class="edit-button-group">
		  	<button type="primary" @click="back" style="width: 45%;" plain="true">返 回</button>
		  	<button type="primary" @click="editStore('form')" plain="true" style="width: 45%;">提 交</button>
		  </view>
		</view>
	</view>
</template>

<script>
	import {listStore, addStore, getStore, updateStore, delStore, getTypes} from "@/api/hmy/material";

	export default {
		data() {
			return {
				showStatus:true,
				storeId: '',
				store: {},
				storeForm:{},
				//饲料类型
				type: '',
				typesList:[],
				position: '',
				material_type:[
					// { value: 1, text: '粗饲料'},
					// { value: 2, text: '青绿饲料'},
					// { value: 3, text: '青贮饲料'},
					// { value: 4, text: '能量饲料'},
					// { value: 5, text: '蛋白质饲料'},
					// { value: 6, text: '矿物质饲料'}
				],
				store_position:[
					{ text: '一号仓库', value: 1},
					{ text: '二号仓库', value: 2},
					{ text: '三号仓库', value: 3}
				],
				rules: {
					materiaFeedType: {
						rules: [{required: true, errorMessage: '饲料种类不能为空'}]
					},
					materiaFeedStoreNum: {
						rules: [{required: true, errorMessage: '数量不能为空'}]
					},
					materiaFeedStorePosition: {
						rules: [{required: true, errorMessage: '存储地点不能为空'}]
					},
					materiaFeedStoreTime: {
						rules: [{required: true, errorMessage: '进仓时间不能为空'}]
					}
				},
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			//console.log(option.id);
			this.storeId = option.id;
			this.getTypesList();
			this.getStoreInfo();
		},
		methods: {
			//动态获取饲料数据
			getTypesList(){
			  getTypes().then(res => {
				this.typesList = res.data;
				this.typesList.forEach(item => {
					this.material_type.push({'text': item.materiaFeedType, 'value' : item.materiaFeedTypeId})
				})
			  })
			},
			//获取存储记录
			getStoreInfo() {
				//显示加载框
				uni.showLoading({
					title:"加载中"
				})
				getStore(this.storeId).then(response => {
					this.storeForm = response.data;
					this.store = response.data;
					this.typesList.forEach(item => {
						if(this.store.materiaFeedType == item.materiaFeedTypeId){
							this.type = item.materiaFeedType
						}
					})

					if (this.store.materiaFeedStorePosition == 1) {
						this.position = this.$dict.selectDictLabel('materia_feed_store_position', 1);
					} else if (this.store.materiaFeedStorePosition == 2) {
						this.position = this.$dict.selectDictLabel('materia_feed_store_position', 2);
					} else if (this.store.materiaFeedStorePosition == 3) {
						this.position = this.$dict.selectDictLabel('materia_feed_store_position', 3);
					}
					
					//隐藏加载框
					uni.hideLoading();
				})
			},

			//删除
			storeDelete() {
				console.log("delete", this.store.materiaFeedStoreId)
				this.$modal.confirm('是否确认删除进货编号为"' + this.store.materiaFeedStoreId + '"的数据项？').then(() => {
					return delStore(this.store.materiaFeedStoreId);
				}).then(response => {
					this.$modal.msgSuccess("删除成功");
					setTimeout(()=>{
						this.$tab.navigateTo('/pages/hmy/material/store');
					},1000)
				}).catch(()=>{
				});
			},

			//修改
			storeEdit() {
				console.log("edit", this.store.materiaFeedStoreId)
				//显示加载框
				uni.showLoading({
					title:"加载中"
				})
				this.showStatus = !this.showStatus;
				//隐藏加载框
				uni.hideLoading();
			},
			
			//返回
			back(){
				this.showStatus = !this.showStatus
				this.getStoreInfo();
			},
			
			//修改提交
			editStore(form) {
			  this.$refs[form].validate().then(res => {
			    updateStore(this.storeForm).then(response => {
			      this.$modal.msgSuccess("修改成功");
				  setTimeout(()=>{
				  	this.$tab.navigateTo('/pages/hmy/material/store');
				  },1000)
				  
			    })
			  })
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		width:100%;
		position:fixed;
		bottom:5px;

	}
	
	.example {
	  padding: 15px;
	  background-color: #fff;
	}
	.edit-button-group{
		display: flex;
		justify-content: space-around;
		width:100%;
		position:fixed;
		bottom:5px;
		left: 0px;
	}
</style>